<template>
  <mheader />
  <div class="container mx-auto mt-2">
    <!-- 筛选栏 -->
    <div class="filtrate">
      <el-form class="classify">
        <el-form-item label="地区">
          <el-radio-group v-model="classify.area" @change="getList">
            <el-radio label="all">全部</el-radio>
            <el-radio label="国产漫画">国产漫画</el-radio>
            <el-radio label="美漫合集">美漫合集</el-radio>
            <el-radio label="日本漫画">日本漫画</el-radio>
            <el-radio label="其他">其他</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分类">
          <el-radio-group v-model="classify.type" @change="getList">
            <el-radio label="all">全部</el-radio>
            <el-radio label="魔幻">魔幻</el-radio>
            <el-radio label="科幻">科幻</el-radio>
            <el-radio label="热血">热血</el-radio>
            <el-radio label="都市">都市</el-radio>
            <el-radio label="灵异">灵异</el-radio>
            <el-radio label="武侠">武侠</el-radio>
            <el-radio label="现代">现代</el-radio>
            <el-radio label="古风">古风</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="进度">
          <el-radio-group v-model="classify.isEnd" @change="getList">
            <el-radio label="all">全部</el-radio>
            <el-radio label="0">连载</el-radio>
            <el-radio label="1">完结</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <!-- 作品展示栏 -->
    <div class="grid grid-cols-5 gap-2">
      <comicCard v-for="(item, index) in list" :key="index" :obj="item" />
    </div>
    <!-- 分页 -->
    <div class="pagiposition mt-4">
      <el-pagination
        layout="prev,pager,next"
        :total="total"
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>
<script>
import mheader from "@/components/home-header.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, Navigation } from "swiper";
import { ArrowDown } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import comicCard from "@/components/comicCard.vue";
import bottom from "@/components/bottom-rail.vue";
import request from "@/axios/http";
export default {
  name: "classify",
  components: { mheader, comicCard },
  data() {
    return {
      classify: {
        area: "all",
        type: !this.$route.query.type ? "all" : this.$route.query.type,
        isEnd: "all",
      },
      pageNum: 1,
      pageSize: 10,
      list: [],
      total: 0,
    };
  },
  methods: {
    getList() {
      let obj = {};
      if (this.classify.area !== "all") {
        obj.area = this.classify.area;
      }
      if (this.classify.type !== "all") {
        obj.type = this.classify.type;
      }
      if (this.classify.isEnd !== "all") {
        obj.isEnd = this.classify.isEnd;
      }
      request({
        url: "comic/getAllComic",
        method: "post",
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          data: obj,
        },
      }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.list = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    currentChange() {
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  watch: {},
};
</script>
<style scoped>
.container {
  padding-top: 75px;
  position: relative;
  width: 1100px;
  /* display: flex; */
  /* padding: 25px 0 270px 270px; */
  /* background-color: aquamarine; */
}

.container .filtrate {
  /* background-color: blue; */
  width: 1100px;
}
</style>
<style scoped>
.book-card {
  width: 150px;
  height: 200px;
}
</style>
<!-- 筛选栏 -->
<style scoped lang="less">
.classify /deep/ .el-radio__input.is-checked .el-radio__inner {
  background: lightblue;
  border: none;
}
.classify /deep/ .el-radio__input.is-checked + .el-radio__label {
  color: lightblue;
}
</style>
<!-- 分页栏 -->
<style scoped lang="less">
.pagiposition {
  position: relative;
  align-items: center;
  justify-content: center;
}
.pagiposition /deep/ .el-pagination {
  --el-pagination-hover-color: lightblue;
}
</style>
